<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <van-uploader
      :after-read="afterRead"
      v-model="fileList"
      multiple
      :preview-image="false"
    >
      <div class="head-portrait">
        <VanImage
          class="head-portrait-left"
          round
          :src="imgurl"
          width="49"
          height="49"
          alt=""
        />

        <div class="head-portrait-right">
          <img
            src="../../assets/image/icon_right.png"
            width="7"
            height="12"
            alt=""
          />
          <p>修改头像</p>
        </div>
      </div>
    </van-uploader>
    <div class="userinfo-name">
      <p class="userinfo-name-pone">实名认证</p>
      <p class="userinfo-name-ptwo">
        {{ userInfo.realnameStatus | realnameStatusType }}
      </p>
      <img
        src="../../assets/image/icon_right.png"
        width="7"
        height="12"
        alt=""
      />
    </div>
    <div class="item margintop">
      <p class="item-left">姓名</p>
      <div class="item-right">{{ userInfo.realname }}</div>
    </div>
    <div class="item" @click="nicknameClick">
      <p class="item-left">昵称</p>
      <div class="item-right">
        <img
          src="../../assets/image/icon_right.png"
          width="7"
          height="12"
          alt=""
        />
        <p class="item-right-p">
          {{
            userInfo.nickname == null ? userInfo.realname : userInfo.nickname
          }}
        </p>
      </div>
    </div>
    <div class="item">
      <p class="item-left">手机号</p>
      <div class="item-right" v-if="userInfo.phone">
        {{ userInfo.phone | getPhone }}
      </div>
    </div>
    <div class="item">
      <p class="item-left">等级</p>
      <div class="item-right">{{ userInfo.gradeName }}</div>
    </div>
    <div class="item margintop">
      <p class="item-left">提现手续费</p>
      <div class="item-right">{{ userInfo.withdrawFee }}元/笔</div>
    </div>
    <div class="item" @click="alipayClick">
      <p class="item-left">绑定支付宝</p>
      <div class="item-right">
        <img
          src="../../assets/image/icon_right.png"
          width="7"
          height="12"
          alt=""
        />
        <p class="item-right-p">未绑定</p>
      </div>
    </div>
    <div class="item margintop">
      <p class="item-left">系统编号</p>
      <div class="item-right">{{ userInfo.idcard }}</div>
    </div>
    <div class="item">
      <p class="item-left">注册日期</p>
      <div class="item-right">{{ userInfo.firstUpgradeTime }}</div>
    </div>

    <!--@confirm="confirmClick"
      @cancel="cancelClick"  -->
    <van-dialog
      v-model="show"
      title="修改昵称"
      show-cancel-button
      :before-close="chargeBtn"
    >
      <!--输入框-->
      <van-field
        v-model="nickname"
        rows="1"
        autosize
        type="text"
        placeholder="请输入昵称"
      />
    </van-dialog>
  </div>
</template> 
<script>
import {
  getApiUserInfo,
  getApiHeaderImageInfo,
  getApiUpdateHeaderImageInfo,
  getApinickName,
} from "network/ApiServe";

export default {
  name: "UserInfo",
  filters: {
    getPhone(phone) {
      return phone.substring(0, 3) + "****" + phone.substring(7);
    },
    realnameStatusType(type) {
      switch (type) {
        case "0":
          return "实名中";
        case "1":
          return "已实名";
        case "2":
          return "实名失败";
        case "3":
          return "未实名";
      }
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    this.phone = localStorage.getItem("phone");
    this.brandId = localStorage.getItem("brandId");
  },
  data() {
    return {
      nickname: "",
      show: false,
      imgurl: require("../../assets/image/icon_share_item1.png"),
      userInfo: {},
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
    };
  },

  mounted() {
    this.getUserInfo();
    this.getApiHeaderImageInfo();
  },
  methods: {
    onClickLeft() {
      this.$router.back(-1);
    },
    getUserInfo() {
      getApiUserInfo(this.token)
        .then((res) => {
          console.log(res);
          if (res.resp_code === "000000") {
            this.userInfo = res.result;
          }
        })
        .catch((err) => {
          console.log(err, "userInfo");
        });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器

      console.log(file, "afterRead");
      console.log(this.fileList[0].file, "img");
      let formData = new FormData();
      formData.append("phone", this.phone);
      formData.append("brandId", this.brandId);
      formData.append("image", this.fileList[0].file);

      getApiUpdateHeaderImageInfo(formData)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.imgurl = file.content;
          }
          this.$toast(res.resp_message);
          console.log(res, "UpdateHeaderImageInfo");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getApiHeaderImageInfo() {
      getApiHeaderImageInfo(this.phone)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.imgurl = res.result;
          }
          console.log(this.imgurl, "HeaderImage");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    nicknameClick() {
      this.show = !this.show;
      this.nickname = this.userInfo.nickname;
    },
    chargeBtn(s, done) {
      console.log(s, "s");
      switch (s) {
        case "confirm":
          if (this.nickname.length > 0) {
            getApinickName(this.nickname)
              .then((res) => {
                this.$toast("修改" + res.resp_message);
                this.getUserInfo();
                return done(false);
              })
              .catch((err) => {
                queueMicrotask;
                console.log(err, "getApinickName");
              });
          }
          break;
        case "cancel":
          return done();
          break;
      }

      this.show = !this.show;
    },

    alipayClick() {
      this.$router.push("alipay");
    },
    confirmClick() {
      console.log("confirmClick");
    },
    cancelClick() {
      console.log("cancelClick");
    },
  },
};
</script>
<style  scoped>
.editViews img {
  height: 12.778vw;
  width: 12.778vw;
}
.uploadfile {
  overflow: hidden;
  position: relative;
}
.uploadimg {
  opacity: 0;
  position: absolute;
}
.van-nav-bar /deep/ .van-icon {
  color: #444;
}
.van-uploader {
  width: 100%;
}
.van-uploader >>> .van-uploader__input-wrapper {
  width: 100%;
}
.head-portrait {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
  height: 70px;
  align-items: center;
}
.head-portrait-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.head-portrait-right p {
  margin-right: 8px;
  font-size: 14px;
  color: #444;
}
.userinfo-name {
  margin-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #fff;
  display: flex;
  height: 44.5px;
  align-items: center;
}
.userinfo-name .userinfo-name-pone {
  flex: 1;
  font-size: 14px;
  color: #444;
}
.userinfo-name .userinfo-name-ptwo {
  font-size: 14px;
  color: #f63802;
  margin-right: 8px;
}
.margintop {
  margin-top: 10px;
}
.item {
  display: flex;
  height: 44px;
  align-items: center;
  font-size: 14px;
  color: #444;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #f7f7f7;
}
.item-left {
  flex: 1;
}
.item-right {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.item-right p {
  margin-right: 8px;
  color: #666;
  font-size: 14px;
}
.van-dialog >>> .van-dialog__header {
  color: #444;
}
.van-dialog >>> .van-field__body {
  padding-left: 20px;
}
</style>